<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<u-icon name="arrow-left" color="#fff" size="22" @click="goBack"></u-icon>
			<!-- <u-icon name="share" color="#fff" size="22"></u-icon> -->
		</view>

		<!-- 二维码核心区域 -->
		<view class="qr-content" ref="qrContentRef">
			<view class="qr-code-wrapper">
				<ikun-qrcode
					width="500"
					height="500"
					unit="rpx"
					:data="qrValue"
					:logo="userInfo.avatar"
					logo-width="100"
					logo-height="100"
				/>
			</view>

			<!-- 用户信息 -->
			<view class="user-card">
				<view class="nickname">{{ userInfo.nickName || '用户昵称' }}</view>
				<view class="douyin-id">
					<text>账号: {{ userInfo.userName || '暂无' }}</text>
					<u-icon name="attach" customStyle="margin-left: 10rpx" @click="copyId"></u-icon>
				</view>
				<view class="slogan">扫一扫，立即关注</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<!-- <view class="actions">
			<view class="action-item">
				<view class="action-icon-bg">
					<u-icon name="scan" color="#fff" size="28"></u-icon>
				</view>
				<text class="action-text">扫一扫</text>
			</view>
			<view class="action-item">
				<view class="action-icon-bg">
					<u-icon name="reload" color="#fff" size="28"></u-icon>
				</view>
				<text class="action-text">换样式</text>
			</view>
			<view class="action-item" @click="saveQRCode">
				<view class="action-icon-bg">
					<u-icon name="download" color="#fff" size="28"></u-icon>
				</view>
				<text class="action-text">保存</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	// 引入配置文件
	import config from '@/config/index.js';
	export default {
		components: {
		},
		data() {
			return {
				userInfo: {}, // 存储用户信息
				qrValue: '',   // 二维码的内容
			};
		},
		onLoad(options) {
			// 页面加载时，解析从上一个页面传递过来的用户信息
			if (options.user) {
				this.userInfo = JSON.parse(decodeURIComponent(options.user));
				// 请根据您的实际业务逻辑，构建二维码要承载的链接地址
				// 二维码内容的格式为 https://link.yourapp.com/模块/操作?参数=值。
				this.qrValue = `${config.appSchemeHost}/user/profile?userId=${this.userInfo.userId}`;
			} else {
                // 异常处理：如果没有获取到用户信息
                uni.showToast({
                    title: '用户信息加载失败',
                    icon: 'error'
                });
                // 设置默认值防止页面报错
                this.userInfo = {
                    nickName: '未知用户',
                    userName: 'xxxxxx',
                    avatar: '', // 默认头像
                    userId: '0'
                }
                this.qrValue = config.appSchemeHost;
            }
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 复制ID到剪贴板
			copyId() {
				uni.setClipboardData({
					data: this.userInfo.userName || '',
					success: () => {
						uni.showToast({
							title: '已复制',
							icon: 'success'
						});
					}
				});
			},
			// 保存二维码到手机相册
			saveQRCode() {
				uni.showLoading({
					title: '正在保存...'
				});
				// 调用l-qrcode组件的方法将二维码渲染为图片
				this.$refs.qrcode.toTempFilePath().then(res => {
					// 调用uni-app API保存图片到相册
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: () => {
							uni.hideLoading();
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});
						},
						fail: (err) => {
							uni.hideLoading();
							// 处理用户拒绝授权的情况
							if (err.errMsg.includes('auth deny') || err.errMsg.includes('auth denied')) {
								uni.showModal({
									title: '提示',
									content: '您需要授权保存图片到相册才能使用该功能',
									success: (modalRes) => {
										if (modalRes.confirm) {
											uni.openSetting(); // 引导用户去设置页开启权限
										}
									}
								})
							} else {
								uni.showToast({
									title: '保存失败',
									icon: 'error'
								});
							}
						}
					});
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: '生成图片失败',
						icon: 'error'
					});
					console.error('QR code generation failed:', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #1a1a1a;
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #1a1a1a;
		color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
		padding-top: var(--status-bar-height);
		width: 100%;
	}

	.qr-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 150rpx;
	}

	.qr-code-wrapper {
		position: relative;
		width: 550rpx;
		height: 550rpx;
		background-color: #fff;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		::v-deep l-qrcode,
		::v-deep .l-qrcode {
			border-radius: 40rpx;
			overflow: hidden;
		}

		.tiktok-logo {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			width: 60rpx;
			height: 60rpx;
			background-color: #fff;
			border-radius: 50%;
			padding: 10rpx;
		}
	}

	.user-card {
		text-align: center;
		margin-top: 40rpx;

		.nickname {
			font-size: 40rpx;
			font-weight: bold;
		}

		.douyin-id {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #999;
			margin-top: 15rpx;
		}

		.slogan {
			font-size: 30rpx;
			color: #ccc;
			margin-top: 30rpx;
		}
	}

	.actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 30rpx 0;
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		background-color: #1a1a1a;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #e5e5e5;

		.action-icon-bg {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #333;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 15rpx;
		}

		.action-text {
			font-size: 24rpx;
		}
	}
</style>